<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>filter 过滤器</h2>
    <p>水---过滤器（小米过滤器）--->饮用水</p>
    <p>A状态---filter--->B状态</p>
    <hr>
    <h2>时间戳展示</h2>
    <!--1 年月日 2 年月日 时分秒-->
    <p>{{ addTime | formatTimestampToDateString(2) }}</p>
    <p>{{ addTime1 | formatTimestampToDateString }}</p>
    <!-- formatTimestampToDateString( addTime ) -->
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">
    /*1. 定义过滤器（过滤器，其实就是一个函数）*/
    /*
    * 参数1：过滤器的名称，稍后在vuejs管理的区域可以使用
    * 参数2：过滤器业务代码，就是一个班函数
    *   参数1：待处理的数据
    *   参数1后面的其他参数，就是调用过滤器时候传递的参数
    * */
    Vue.filter('formatTimestampToDateString', function (input, type = 1) {
            let date = new Date(input * 1000);
            if (type == 2) {
                return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();

            } else {
                date.getSeconds()
                return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            }
        }
    )

    new Vue({
        el: '#app',
        data: {
            /*https://tool.lu/timestamp/*/
            addTime: 1652076228,// 时间戳数据
            addTime1: 1652086228,// 时间戳数据
        }
    })
</script>

</html>
